
<div class="image-broswer">
  <{area inject=".mainHead"}>
  <div class="tabs-wrap image-broswer-handle" id="image-broswer-handle">
    <ul>
     <li class="tab current" tf="local"><span><{t}>从本地选择图片<{/t}></span></li>
     <li class="tab" tf="img_lib"><span><{t}>从图库选择图片<{/t}></span></li>
     <li class="tab" tf="www"><span><{t}>互联网上的图片<{/t}></span></li>
    </ul>
  </div>
  <{/area}>
  
  <div class="image-broswer-panel">
      <div class="tableform">
		  <form action="index.php?app=image&ctl=admin_manage&act=image_upload" enctype="multipart/form-data" method="post">
			  <div class="division">
				 <h5><{t}>从本地计算机浏览图片<{/t}> </h5>
				 <input type="hidden" name="callbackfunc" value="imageBroswerUploadCallBack"/>
				 <input type="hidden" name="type" value="<{$type}>"/>
				 <input type="file" name="upload_item"/>          
			  </div>
			  <div class="division">
					<h5><{t}>为图片打上标签(多个标签用空格分隔):<{/t}></h5>
					<input size="50" type="text" name="tag[name]" class="x-tag-input"></input>
					<dl class="x-tag-wrapper clearfix">
					    <dt class="x-tag-info"><{t}>常用标签：<{/t}></dt>
    					<dd class="x-tag-list x-tag-container">
        					 <{foreach from=$tags item=tag}>
        					    <span class="x-tag" tag_id="<{$tag.tag_id}>"><{$tag.tag_name}></span>
        					 <{/foreach}>
    					</dd>
					</dl>
			  </div>
		  </form>	
      </div>
      <div class="tableform">
		<{if $tags}>
              <div class="division">
                 <dl id="tag-filter" class="x-tag-wrapper clearfix">
				     <dt class="x-tag-info"><{t}>标签:<{/t}></dt>
				     <dd class="x-tag-list">
							<li class="x-tag c-blue" tag_id="0">全部</li>
    				 <{foreach from=$tags item=tag}>
    						<li class="x-tag" tag_id="<{$tag.tag_id}>"><{$tag.tag_name}></li>
    				 <{/foreach}>
                     </dd>
                 </dl>
              </div>
			<{/if}>
               <div class="division image_list">
                   <h5><{t}>图库<{/t}></h5>
                   <div class="can" id="image_lib">
                     <div class='note'><{t}>正在载入图库...<{/t}></div>
                   </div>
               </div>
      </div>
      <div class="tableform">
	  	 <form action="index.php?app=image&ctl=admin_manage&act=image_www_uploader" enctype="multipart/form-data" method="post">
			  <div class="division">
				  <h5><{t}>网络图片链接<{/t}></h5>
				  <input type="hidden" name="callbackfunc" value="imageBroswerUploadCallBack"/>
				  <input type="hidden" name="type" value="<{$type}>"/>
				 <input type="text" name="upload_item" class="inputstyle"/>
			  </div>
			  <div class="division">
				<h5><{t}>为图片打上标签(多个标签用空格分隔):<{/t}></h5>
				<input size="50" type="text" name="tag[name]" class="x-tag-input"></input>
				<dl class="x-tag-wrapper clearfix">
				    <dt class="x-tag-info"><{t}>常用标签：<{/t}></dt>
					<dd class="x-tag-list x-tag-container">
  					 <{foreach from=$tags item=tag}>
  					    <span class="x-tag" tag_id="<{$tag.tag_id}>"><{$tag.tag_name}></span>
  					 <{/foreach}>
					</dd>
				</dl>
			  </div>
		</form>
      </div>
  </div>

</div>
<{area inject='.mainFoot'}>
<div class="table-action">

   <{button type="button" label=$___a="确认"|t:'image' id="image-broswer-submit"}>
   
   
   <{button type="button" label=$___a="取消"|t:'image' onClick="window.close();" class="btn-secondary" closedialog=true}>

</div>
<{/area}>

<script>
   
				
     void function(){
           
          var dialogCallBack =window.modedialogInstance?window.modedialogInstance.imgcallback.bind(window.modedialogInstance):$empty;
         /*upload callback */
            imageBroswerUploadCallBack = function(ident,src){
					
                   dialogCallBack(ident,src);
            };
  
		
            new Acc($$('#image-broswer-handle .tab'), $$('.image-broswer .tableform'),{onActive:function(t,i){
            
                        t.addClass('current');
                        
                        var item = t.retrieve('linkitem',i).setStyle('display','block');
                        
                        if(t.get('tf')=='img_lib'){
                             if($('image_lib').get('container'))return;
                             $('image_lib').set('container',true);
                             W.page("index.php?app=image&ctl=admin_manage&act=image_lib",{update:'image_lib',clearUpdateMap:false});
                        }                    
            }});
     
     
            
     
             $('image-broswer-submit').addEvent('click',function(){
             
                 var curHandle = $E('#image-broswer-handle .current');
                 var curLinkItem = curHandle.retrieve('linkitem');
                 
				
                 switch(curHandle.get('tf')){                 
                    case 'local':						
                         curLinkItem.getElement('form').fireEvent('submit',{stop:$empty});
                         break;
                    case 'img_lib':
						var img_cur=$('image_lib').retrieve('image-selected');
						if(!img_cur)break;
						var ident=img_cur.get('gid'),
							src=img_cur.get('src');
							<{if $env.get.type=='big'}>
								src = img_cur.get('lsrc');
							<{/if}>
						dialogCallBack(ident,src);	
						break;                    
                    case 'www':
						curLinkItem.getElement('form').fireEvent('submit',{stop:$empty});
						break;
                 }
                                
				 
             
             
             });


            $E('.image_list').addEvent('click',function(e){
				var target=$(e.target);
				if(target.match('img')&&target.get('gid')){
					$('image_lib').retrieve('image-selected',target).getParent('.item').removeClass('current');
					target.getParent('.item').addClass('current');
					$('image_lib').store('image-selected',target);	
				}
			}); 
			    
     
			$ES('#tag-filter .x-tag').addEvent('click',function(e){
				var _this=this,box=$('image_lib');
				if(_this.retrieve('cache_fn'))return _this.retrieve('cache_fn')();		
				var url='index.php?app=image&ctl=admin_manage&act=image_lib&p[0]='+this.get('tag_id');
				W.page(url,{update:box,onRequest:function(){
					box.innerHTML='Loading......';
				},onComplete:function(rs){	
					_this.retrieve('cache_fn',function(){						
						box.eliminate('image-selecte').innerHTML=rs;
						var tagBox=_this.getParent('#tag-filter');			
						tagBox.retrieve('tag-selected',_this).removeClass('x-tag-selected');
						_this.addClass('x-tag-selected');	
						tagBox.store('tag-selected',_this);	
					})();
				}});
			});


var SimpleTagEditor = new Class({

    Implements: [Options],

    options:{
        interval: 400
    },

    initialize: function(el, container, options){
        this.el = $(el);
        this.container = $(container);
        if(!this.el || !this.container) return;
        this.setOptions(options);

        this.tagCache = [];
        this.altTags = this.container.getElements('.x-tag');
        this.addTags();

        this.el.addEvents({
            'focus': this.start.bind(this),
            'blur': this.stop.bind(this)
        });
        this.container.addEvent('click', this.toggleTag.bindWithEvent(this));
    },

    addTags: function(){
        var values = [];
        this.altTags.each(function(tag){
            var value = tag.get('text');
            this.tagCache.push(value);
            if(tag.hasClass('x-tag-selected')) values.push(value);
        },this);
        this.value = values.join(' ');
        return this;
    },

    getValue: function(){
        return this.el.get('value');
    },

    setValue: function(){
        this.el.set('value', this.value);
        return this;
    },

    checkTag: function(){
        if(!this.focus) return;
        var value = this.getValue();
        if(this.value === value) return;
        var values = value.split(' ');
        this.altTags.removeClass('x-tag-selected');
        values.each(function(item){
            this.tagCache.each(function(tag, index){
                if(tag == item) this.altTags[index].addClass('x-tag-selected');
            },this);
        },this);
        this.value = value;
        this.setValue();
    },

    toggleTag: function(e){
        e.stop();
        var tgt = e.target;
        if(!tgt.hasClass('x-tag')) return;
        var value = tgt.get('text'),
            values = this.value.clean().split(' ');
        if(!tgt.hasClass('x-tag-selected')){
            values.include(value);
            tgt.addClass('x-tag-selected');
        }else{
            values.erase(value);
            tgt.removeClass('x-tag-selected');
        }
        this.value = values.join(' ').trim();
        this.setValue();
        return this;
    },

    start: function(){
        if(this.focus) return;
        this.focus = true;
        this.timer = this.checkTag.periodical(this.options.interval, this);
    },

    stop: function(){
        if(!this.focus) return;
        this.timer = $clear(this.timer);
        this.focus = false;
    }

});


			$$('.x-tag-input').each(function(input){
			    var container = input.getParent().getElement('.x-tag-container');
			    if(!container) return;
			    new SimpleTagEditor(input, container);
			},this);
            
			
     }();       

		


</script>



